<template>
  <view class='goodsList'>
    <view class='goodsList_item'>
      <card_detail  v-for="item in goodsList" :key="item.id" :item="item"></card_detail>
    </view>
    <block v-if='more === "loading"'>
      <van-loading size="24px " color="#fa8072">加载中...</van-loading>
    </block>
    <block v-if='more === "nomore"'>
      <view class='goodsList_text'>没有内容了...</view>
    </block>
  </view>
</template>

<script lang="ts">
import { defineComponent, ref } from 'vue'
import card_detail from '../../../components/card_item/card_detail.vue'

export default defineComponent({
  name: 'list',
})
</script>

<script setup lang="ts">
import { onLoad ,onReachBottom} from '@dcloudio/uni-app';
import { goodsLimit } from '../../../Api/goods'

const goodsList = ref<any>([])// 数据
const page = ref(1)//当前页
const limit = ref(10)// 当前显示
const more = ref('more') // 判断当前是什么状态
onLoad(() => {
  getGoodsList()
})
// 获取数据
async function getGoodsList() {
  try {
    more.value = 'loading'
    const res = await goodsLimit(page.value, limit.value)
    if (res.code === 200) {
      if (res.data.records.length > 0) {
        if (res.data.records.length < limit.value) {
          more.value = 'nomore'
        } else {
          more.value = 'more'
        }
        goodsList.value.push(...res.data.records)
        goodsList.value = goodsList.value
        page.value = page.value+1
      } else {
        more.value = 'nomore'
      }
    }
  } catch (error) {
    more.value = 'error'
  }
}

onReachBottom(()=>{
    more.value === 'more' && getGoodsList()
}) 

</script>

<style scoped>
/* pages/goods/list/list.wxss */
.goodsList {
  width: 100%;
  min-height: 100%;
  background: darkgrey;
}

.goodsList_item {
  width: 100%;
  height: 100%;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
}

.goodsList_text {
  width: 100%;
  height: 30px;
  font-size: 16px;
  background: #fff;
  line-height: 30px;
  text-align: center;
}
</style>